import React, { Component } from 'react'
import { reqSevenDayWeader, reqCitySearchById, reqCitySearchByStr } from '../../api/index'
import { to } from '../../utils'
import { Card, Select, message } from "antd"
import WeaderChart from './WeaderChart'
import './home.less'

const { Option } = Select;

export default class Home extends Component {

    state = {
        weaderData: {},
        activeIndex: 0,
        cityId: 0,
        cityData: [],
        timer: null
    }

    componentDidMount() {
        this.getSeventDayWeader()
    }

    getSeventDayWeader = async () => {
        let [err, res] = await to(reqSevenDayWeader({ appid: 98675213, appsecret: 'aAmUa1uy', version: 'v1', vue: 1, cityid: this.state.cityId }))
        if (err) return
        this.setState({
            weaderData: res
        }, () => {
            console.log(res, 888)
            this.citySearchById(res.cityid)
        })

    }

    handleDayClick = (index) => {
        this.setState({
            activeIndex: index
        })
    }

    citySearchById = async (id) => {
        console.log(id, 8888)
        let [err, res] = await to(reqCitySearchById(id))
        if (err) return
        if (res.code !== 0) return message.error(res.msg)
        // this.setState({
        //     cityId: res.body.id,
        //     cityData: [res.body]
        // })
    }

    handleSearch = value => {
        clearTimeout(this.state.timer)
        let timer = setTimeout(async () => {
            if (value) {
                let [err, res] = await to(reqCitySearchByStr(value))
                if (err) return
                if (res.code !== 0) return message.error(res.msg)
                this.setState({cityData: res.body})
            } else {
                this.setState({ cityData: [] });
            }
        }, 300)
        this.setState({timer})
        
    };

    handleChange = value => {
        this.setState({ cityId: value }, () => {
            this.getSeventDayWeader()
        });
    };

    render() {
        const { weaderData, activeIndex, cityId, cityData } = this.state

        const options = cityData.map(city => (<Option key={city.id}>{city.provinceZh} > {city.cityZh}</Option>))

        return (
            <Card title="首页" className="home" style={{ height: '100%' }} extra={
                <Select
                    showSearch
                    value={cityId}
                    placeholder={'请输入城市名'}
                    defaultActiveFirstOption={false}
                    filterOption={false}
                    onSearch={this.handleSearch}
                    onChange={this.handleChange}
                    style={{ width: 200 }}
                >
                    {options}
                </Select>
            }
            >
                <ul className="home-days">
                    {
                        weaderData.data && weaderData.data.map((item, index) => (
                            <li key={index} className={activeIndex === index ? 'activeDay' : null} onClick={() => this.handleDayClick(index)}>
                                <div className="day">{item.day}</div>
                                <div className="wea-img">
                                    <img src={require('../../assets/imgs/weather_api/' + item.wea_img + '.gif')} alt={item.wea_img} />
                                </div>
                                <div className="wea">{item.wea}</div>
                                <div className="tem">{item.tem2 + "~" + item.tem1}</div>
                                <div className="win">
                                    {
                                        item.win.map((val, i) => <span key={i}>{val}</span>)
                                    }
                                </div>
                                <div className="win_speed">{item.win_speed}</div>
                            </li>
                        ))
                    }
                </ul>

                <ul className="home-row2">
                    <li> 城市： {weaderData.data && weaderData.city} </li>
                    <li> 当前温度： {weaderData.data && weaderData.data[0].tem} </li>
                    <li>
                        天气： {weaderData.data && weaderData.data[0].wea}
                        {weaderData.data && <img src={require('../../assets/imgs/weather_api/' + weaderData.data[0].wea_img + '.gif')} alt={weaderData.data[0].wea_img} />}
                    </li>
                    <li> 空气质量： {weaderData.data && weaderData.data[0].air_level} </li>
                    <li> 日期： {weaderData.data && weaderData.data[0].date} </li>
                </ul>

                <ul className="home-lifeitem">
                    {
                        weaderData.data && weaderData.data[activeIndex].index.map((item, index) => (
                            <li key={index}>
                                <div className="home-lifeitem-title">{item.title}</div>
                                <div className="home-lifeitem-content">
                                    <div className="home-lifeitem-content-level">{item.level}</div>
                                    <div className="home-lifeitem-content-desc">{item.desc}</div>
                                </div>
                            </li>
                        ))
                    }
                </ul>

                {weaderData.data && <WeaderChart key={weaderData.cityid + '' + activeIndex} hours={weaderData.data[activeIndex].hours} />}

            </Card>
        )
    }
}
